<template>
  <div class="f-all">
    <div class="f-one">
      <div class="f-one-top">
        <div class="f-one1">
          <!-- <span class="timer">{{this.currentTime}}</span>
          <span class="timer2">{{this.currentTime2}}</span>-->

           <em class="timer">{{this.nowTime}}</em>
          <span class="timer2">{{nowWeek}}</span> &nbsp; &nbsp;
          <span class="timer3">{{nowDate}}</span>
          &nbsp; &nbsp;
         
        </div>
        <div class="f-one2">
          <img src="static\img\大屏标题.png" alt class="f-one2-img" />
        </div>
        <div class="tubiao">
          <div
            class="el-icon-s-unfold"
            style="
            font-size: 25px;
           magin-left:200px;
            margin-top: 20px;
            cursor: pointer;
            color:white
          "
            @click="tuichu()"
          ></div>
        </div>
      </div>
      <div class="f-one-bottom">
        <img src="../../static/Monitor-img/f-bottom.png" alt width="100%" height="28px" />
      </div>
    </div>
    <div class="f-two">
      <div class="two-left">
        <div class="two-left1">
          <img src="static\Monitor-img\标题图.png" alt width="200px" height="60px" />
          <p class="left1-1">安全生产</p>
        </div>
        <!-- 监控设备 -->
        <div class="two-left2">
          <img
            src="static\Monitor-img\标题图2.png"
            alt
            width="200px"
            height="50px"
            style="margin-top: -15px; margin-left: -28px"
          />
          <span class="left2-zi">重点设备监控</span>
        </div>
        <div class="two-left3">
          <el-tabs v-model="activeName" @tab-click="handleClick" style=" width: 410px">
            <el-tab-pane label="塔吊检查" name="second">
              <div class="col-left">
                <img src="static\img\tower.e1a6aabb.png" class="y-img-2" alt />
              </div>
              <div class="col-right">
                <div class="y-l-1">
                  <p class="y-2-2">
                    设备编号:
                    <span class="l-1">{{this.lshuju.tower_code}}</span>
                  </p>
                  <p class="y-2-2">
                    数据接收时间:
                      <span class="l-1">2020-10-02</span>
                    <!-- <span class="l-1">{{this.lshuju.tower_receive}}</span> -->
                  </p>
                  <p class="y-2-2">
                    塔身高度:
                    <span class="l-1">{{this.lshuju.tower_height}}</span>
                  </p>
                  <p class="y-2-2">
                    垂直角度:
                    <span class="l-1">{{this.lshuju.tower_vertical}}</span>
                  </p>
                  <p class="y-2-2">
                    力矩比:
                    <span class="l-1">{{this.lshuju.tower_torque}}</span>
                  </p>
                  <p class="y-2-2">
                    风速:
                    <span class="l-1">{{this.lshuju.tower_wind}}</span>
                  </p>
                  <p class="y-2-2">
                    前臂:
                    <span class="l-1">{{this.lshuju.tower_forearm}}</span>
                  </p>
                </div>
                <div class="y-l-2">
                  <p class="y-2-2">
                    后臂：
                    <span class="l-1">{{this.lshuju.tower_afterwrap}}</span>
                  </p>
                  <p class="y-2-2">
                    吊重：
                    <span class="l-1">{{this.lshuju.tower_hoisting}}</span>
                  </p>
                  <p class="y-2-2">
                    回转:
                    <span class="l-1">{{this.lshuju.tower_turn}}</span>
                  </p>
                  <p class="y-2-2">
                    小车幅度:
                    <span class="l-1">{{this.lshuju.tower_range}}</span>
                  </p>
                  <p class="y-2-2">
                    水平斜角:
                    <span class="l-1">{{this.lshuju.tower_mitre}}</span>
                  </p>
                  <p class="y-2-2">
                    吊钩高度:
                    <span class="l-1">{{this.lshuju.tower_hook}}</span>
                  </p>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="环境监测" name="first">
              <div class="y-top">
                <div class="y-2">
                  <el-select v-model="value" @change="inputchange(value)" placeholder="环境">
                    <el-option
                      v-for="item in yinput"
                      :key="item.equipment_id"
                      :label="item.equipment_name"
                      :value="item.equipment_id"
                    ></el-option>
                  </el-select>
                </div>
              </div>
              <div class="col-left">
                <img src="static\img\tower.e1a6aabb.png" class="y-img-1" alt />
              </div>
              <div class="col-right33">
                <div class="y-l-1">
                  <p class="y-2-2">
                    设备编号:
                    <span class="l-1">{{this.datale.weather_code}}</span>
                  </p>
                  <p class="y-2-2">
                    数据接收时间:
                    <span class="l-1">{{this.datale.weather_receive}}</span>
                  </p>
                  <p class="y-2-2">
                    风速:
                    <span class="l-1">{{this.datale.weather_wind}}</span>
                  </p>
                  <p class="y-2-2">
                    风速预警值:
                    <span class="l-1">{{this.datale.weather_wind_warning}}</span>
                  </p>
                  <p class="y-2-2">
                    PM2.5:
                    <span class="l-1">{{this.datale.weather_pmtwo}}</span>
                  </p>
                  <p class="y-2-2">
                    PM2.5预警值:
                    <span class="l-1">{{this.datale.weather_pm_warning}}</span>
                  </p>
                </div>
                <div class="y-l-2">
                  <p class="y-2-2">
                    温度:
                    <span class="l-1">{{this.datale.weather_temperature}}</span>
                  </p>
                  <p class="y-2-2">
                    噪音:
                    <span class="l-1">{{this.datale.weather_noise}}</span>
                  </p>
                  <p class="y-2-2">
                    噪音预警值:
                    <span class="l-1">{{this.datale.weather_noise_warning}}</span>
                  </p>
                  <p class="y-2-2">
                    湿度:
                    <span class="l-1">{{this.datale.weather_humidity}}</span>
                  </p>
                  <p class="y-2-2">
                    PM10:
                    <span class="l-1">{{this.datale.weather_pmten}}</span>
                  </p>
                  <p class="y-2-2">
                    PM10预警值:
                    <span class="l-1">{{this.datale.weather_pmten_warning}}</span>
                  </p>
                </div>
              </div>
            </el-tab-pane>
            <!-- 基坑 -->
            <el-tab-pane label="基坑" name="third">
              <div class="y-top">
                <!-- 下拉框 -->
                <div class="y-2">
                  <el-select
                    :popper-append-to-body="false"
                    popper-class="select-option"
                    v-model="val"
                    @change="input2change(val)"
                    placeholder="基坑"
                  >
                    <el-option
                      v-for="item in yinput1"
                      :key="item.equipment_id"
                      :label="item.equipment_name"
                      :value="item.equipment_id"
                    ></el-option>
                  </el-select>
                </div>
              </div>
              <div class="col-left">
                <img src="static\img\tower.e1a6aabb.png" class="y-img-1" alt />
              </div>
              <div class="col-right33">
                <div class="y-l-1">
                  <p class="y-2-2">
                    设备编号:
                    <span class="l-1">{{this.datale1.pit_code}}</span>
                  </p>
                  <p class="y-2-2">
                    数据接收时间:
                    <span class="l-1">{{this.datale1.pit_receive}}</span>
                  </p>
                  <p class="y-2-2">
                    测量点:
                    <span class="l-1">{{this.datale1.pit_measure}}</span>
                  </p>
                  <p class="y-2-2">
                    变化量:
                    <span class="l-1">{{this.datale1.pit_change}}</span>
                  </p>
                </div>
                <div class="y-l-2">
                  <p class="y-2-2">
                    速率:
                    <span class="l-1">{{this.datale1.pit_speed}}</span>
                  </p>
                  <p class="y-2-2">
                    预警值:
                    <span class="l-1">{{this.datale1.pit_speed_warning}}</span>
                  </p>
                  <p class="y-2-2">
                    设计控制值:
                    <span class="l-1">{{this.datale1.pit_control}}</span>
                  </p>
                </div>
              </div>
            </el-tab-pane>
            <!-- <el-tab-pane label="" name="fourth">定时任务补偿</el-tab-pane> -->
          </el-tabs>
        </div>
        <!-- 安全巡查 -->
        <div class="two-left2">
          <img
            src="static\Monitor-img\标题图2.png"
            alt
            width="200px"
            height="50px"
            style="margin-top: -15px; margin-left: -28px"
          />
          <span class="left2-zi">消息公告</span>
        </div>
        <div class="two-left4">
          <div class="two-left4-top">
            <div class="two-left4-top1">消息标题</div>
            <div class="two-left4-top2">发布时间</div>
            <!-- <div class="two-left4-top2">消息标题</div> -->
            <div class="two-left4-top3">消息内容</div>
          </div>
          <div class="two-left4-bottom">
            <div class="father-cont">
              <ul class="fa-scroll-cont" id="scroll-box">
                <li v-for="item in list" :key="item.name">
                  <span class="f-hua1">{{ item.message_head }}</span>
                  <span class="f-hua2">{{ item.message_date.slice(0,9) }}</span>
                  <span class="f-hua3">{{item.message_txt}}</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <!-- 安全作业 -->
        <div class="two-left2">
          <img
            src="static\Monitor-img\标题图2.png"
            alt
            width="200px"
            height="50px"
            style="margin-top: -15px; margin-left: -28px"
          />
          <span class="left2-zi">班组统计</span>
        </div>
        <!-- <ve-bar :data="chartData" :settings="chartSettings" height="250px" width="400px" ></ve-bar> -->
        <div class="two-left5">
          <ve-line :data="chartDatagroup" width="400px" height="250px"></ve-line>
          <!-- <ve-bar
            :data="chartDatagroup"
            :settings="chartSettings"
            width="90%"
            height="250px"
            :x-axis="xAxis"
          ></ve-bar>-->
        </div>
        <!-- 安全培训 -->
        <div class="two-left2">
          <img
            src="static\Monitor-img\标题图2.png"
            alt
            width="200px"
            height="50px"
            style="margin-top: -15px; margin-left: -28px"
          />
          <span class="left2-zi">安全培训</span>
        </div>
        <div class="two-left6">
          <ve-ring :data="chartDatabing" :settings="chartSettingsbing" height="150px"></ve-ring>
          <!-- :title="title" -->
          <!-- <ve-histogram 
           
             :data="lchartData"
               width="300px"
                height="200px"
                 :settings="lchartSettings"
          ></ve-histogram>-->
          <!-- 安全培训 -->
          <!-- <ve-ring :data="chartData2" width="100px" height="100px" :settings="chartSettings"></ve-ring> -->
        </div>
      </div>
      <!-- 中间部分 -->
      <div class="two-bottom">
        <div class="two-bottom-top">
          <div class="two-bottom1">
            <img src="static\Monitor-img\标题图.png" alt width="200px" height="60px" />
            <p class="left1-1" >工程信息</p>
          </div>
          <!-- 工地实景图 -->
          <div class="two-left2">
            <img
              src="static\Monitor-img\标题图2.png"
              alt
              width="200px"
              height="50px"
              style="margin-top: -15px; margin-left: -28px"
            />
            <span class="left2-zi">工地实景图</span>
          </div>
          <div class="two-bottom2">
            <img src="static\Monitor-img\墨刀工地 图.png" alt width="100%" height="285px" />
            <div class="img-1">
              <img src="static\Monitor-img\摄像头.png" alt class="two-bottom2-sxt" />
              <img src="static\Monitor-img\sxt1.png" alt class="two-bottom2-sxt1" />
              <img src="static\Monitor-img\sxt2.png" alt class="two-bottom2-sxt2" />
            </div>
            <div class="img-2">
              <img src="static\Monitor-img\摄像头.png" alt class="two-bottom2-sxt" />
              <img src="static\Monitor-img\sxt1.png" alt class="two-bottom2-sxt1" />
              <img src="static\Monitor-img\sxt2.png" alt class="two-bottom2-sxt2" />
            </div>
            <div class="img-3">
              <img src="static\Monitor-img\摄像头.png" alt class="two-bottom2-sxt" />
              <img src="static\Monitor-img\sxt1.png" alt class="two-bottom2-sxt1" />
              <img src="static\Monitor-img\sxt2.png" alt class="two-bottom2-sxt2" />
            </div>
          </div>
          <!-- 工程进度 -->
          <div class="two-left2">
            <img
              src="static\Monitor-img\标题图2.png"
              alt
              width="200px"
              height="50px"
              style="margin-top: -15px; margin-left: -28px"
            />
            <span class="left2-zi">工程进度图</span>
          </div>
          <div class="two-bottom3">
            <div class="two-bottom3-zi">
              <span class="two-bottom3-zi1">{{ this.safetyDays }}</span>
              <span class="two-bottom3-zi2">{{ this.countDownDays }}</span>
            </div>
            <div class="l-gongditu">
              <div class="l-gongditu-1" v-for="(item, index) in lgetNodeDates" :key="index">
                <div class="l-gongditu-1-1">
                  <img class="l-gongditu-img" :src="item.material_url" alt />
                </div>
                <div class="l-gongditu-1-2">{{ item.node_name }}</div>
                <div class="l-gongditu-1-3">{{ item.node_planend }}</div>
                <div
                  class="l-gongditu-1-4"
                  :class="{active:item.efficiency.indexOf('滞后')!==-1}"
                >{{item.efficiency}}</div>
              </div>
            </div>
          </div>
        </div>
        <!-- 中间下面部分 -->
        <div class="two-bottom-bottom">
          <div class="two-bottom-bottom1">
            <div class="two-bottom-bottom2-zi">效率进度</div>
            <div class="two-bottom-bottom3">
              <div class="two-bottom-bottom3-1">
                 <div class="ltwo-bottom-bottom3-1-top">233人</div>
                <!-- <div class="ltwo-bottom-bottom3-1-top">{{ this.lalarm2.countNum}}人</div> -->
                <div class="ltwo-bottom-bottom3-1-bottem">应出勤数</div>
              </div>
              <div class="two-bottom-bottom3-1">
                 <div class="ltwo-bottom-bottom3-1-top">177人</div>
                <!-- <div class="ltwo-bottom-bottom3-1-top">{{ this.lalarm2.peopleNum }}人</div> -->
                <div class="ltwo-bottom-bottom3-1-bottem">实际出勤数</div>
              </div>
              <div class="two-bottom-bottom3-2">
                <div class="ltwo-bottom-bottom3-1-top">56人</div>
                <div class="ltwo-bottom-bottom3-1-bottem">迟到</div>
              </div>
            </div>
            <div class="liangdian">
              <div class="liangdian1">
                <div class="liangdian1-a">项目亮点图片</div>
                <div class="liangdian1-b">项目亮点介绍</div>
              </div>
              <div class="liangdian1" v-for="(item, index) in liangdian" :key="index">
                <div class="liangdian1-2">
                  <img class="liangdianimg" :src="item.material_url" alt />
                </div>
                <div class="liangdian1-1">{{item.lightspot_text}}</div>
              </div>
            </div>
          </div>
          <div class="two-bottom-bottom2">
            <div class="two-bottom-bottom2-zi">预警监测</div>
            <div class="two-bottom-bottom3">
              <div class="two-bottom-bottom3-1">
                <div class="ltwo-bottom-bottom3-1-top">{{ this.lalarm.alarminfoNum }}</div>
                <div class="ltwo-bottom-bottom3-1-bottem">累计预警数</div>
              </div>
              <div class="two-bottom-bottom3-1">
                <div class="ltwo-bottom-bottom3-1-top">{{ this.lalarm.alarminfoDealNum }}</div>
                <div class="ltwo-bottom-bottom3-1-bottem">已处理预警数</div>
              </div>
              <div class="two-bottom-bottom3-2">
                <div class="ltwo-bottom-bottom3-1-top">{{ this.lalarm.alarminfoNoDealNum }}</div>
                <div class="ltwo-bottom-bottom3-1-bottem">未处理预警数</div>
              </div>
            </div>

            <div class="two-bottom-bottom4">
              <div class="two-bottom4-top1">设备名称</div>
              <div class="two-bottom4-top2">预警时间</div>

              <div class="two-bottom4-top3">预警状态</div>
            </div>
            <div class="two-bottom4-bottom">
              <div class="father-cont-bottom">
                <ul class="fa-scroll-cont" id="scroll-box2">
                  <li v-for=" item in police_xinxi" :key="item.name">
                    <span class="f-hua1-bottom">{{item.equipment_name}}</span>
                    <span class="f-hua2-bottom">{{item.alarminfo_start}}</span>
                    <span class="f-hua3-bottom">
                      <span v-if="item.alarminfo_status==0" style="color:red">未处理</span>
                      <span v-if="item.alarminfo_status==1" style="color:blue">已处理</span>
                    </span>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="two-right">
        <div class="two-right-top">
          <div class="two-right11">
            <img src="static\Monitor-img\标题图.png" alt width="200px" height="60px" />
            <p class="left1-1">绿色施工</p>
          </div>
          <!-- 监控设备 -->
          <div class="two-left2">
            <img
              src="static\Monitor-img\标题图2.png"
              alt
              width="200px"
              height="50px"
              style="margin-top: -15px; margin-left: -28px"
            />
            <span class="left2-zi">实时天气</span>
          </div>
          <div class="two-right-top1-tianqi">
            <div class="tian">
              <div id="weather-v2-plugin-simple"></div>
            </div>
          </div>
          <!-- 监控设备 -->
          <div class="two-left2">
            <img
              src="static\Monitor-img\标题图2.png"
              alt
              width="200px"
              height="50px"
              style="margin-top: -15px; margin-left: -28px"
            />
            <span class="left2-zi">环境监测</span>
          </div>
          <div class="two-right-top1-juanjing">
            <ve-histogram
              :data="lchartData"
              width="400px"
              height="250px"
              :settings="lchartSettings"
            ></ve-histogram>
            <!-- <ve-line :data="chartData" :settings="chartSettings"></ve-line> -->
          </div>
        </div>
        <div class="two-right-bottom">
          <div class="two-right11">
            <img src="static\Monitor-img\标题图.png" alt width="220px" height="60px" />
            <p class="left1-1">出入口检测</p>
          </div>
          <!-- 监控设备 -->
          <div class="two-left2">
            <img
              src="static\Monitor-img\标题图2.png"
              alt
              width="200px"
              height="50px"
              style="margin-top: -15px; margin-left: -28px"
            />
            <span class="left2-zi">人行记录</span>
          </div>
          <div class="two-right-top1">
            <div class="two-right-top1-1">
              <img src="static\Monitor-img\person.a970815e.gif" alt width="90px" height="60px" />
            </div>
            <div class="two-right-top1-2" v-for="item in people_xinxi" :key="item.attendance_id">
              <img :src="item.buildPeople.people_url" alt width="140px" height="190px" />
            </div>
            <div class="two-right-top1-3">
              <span class="two-right-top1-3-11" v-for="item in people_xinxi" :key="item.carinfo_id">
                <span v-if="item.buildPeople.people_status == 0" style="color: blue">待入场</span>
                <span v-if="item.buildPeople.people_status == 1" style="color: blue">入场</span>
                <span v-if="item.buildPeople.people_status == 2" style="color: red">离场</span>
              </span>
              <div v-for="(item, index) in people_xinxi" :key="index">
                <p class="two-right-top1-3-1">
                  {{ item.buildPeople.people_name }}
                  <!-- {{this.fpeople_name}} -->
                </p>
              </div>
              <div v-for="item in people_xinxi" :key="item.people_status">
                <p class="two-right-top1-3-1">{{ item.buildCompany.company_name }}</p>
                <p class="two-right-top1-3-1">{{ item.buildEquipment.equipment_addr }}</p>
                <p class="two-right-top1-3-1">{{ item.attendance_using }}</p>
                <!-- <p class="two-right-top1-3-1">挖掘机司机</p> -->
              </div>
            </div>
          </div>
          <!-- 监控设备 -->
          <div class="two-left2">
            <img
              src="static\Monitor-img\标题图2.png"
              alt
              width="200px"
              height="50px"
              style="margin-top: -15px; margin-left: -28px"
            />
            <span class="left2-zi">车行记录</span>
          </div>
          <div class="two-right-top1">
            <div class="two-right-top1-1">
              <img src="static\Monitor-img\car_icon.2e97e97d.gif" alt width="90px" height="60px" />
            </div>
            <div class="two-right-top1-2" v-for="item in car_xinxi" :key="item.attendance_id">
              <img :src="item.carinfo_url" alt width="140px" height="190px" />
            </div>
            <div class="two-right-top1-3" v-for="(item, index) in car_xinxi" :key="index">
              <span class="two-right-top1-3-11">
                <span v-if="item.carinfo_state == 0" style="color: blue">入场</span>
                <span v-if="item.carinfo_state == 1" style="color: red">离场</span>
              </span>
              <div v-for="(item, index) in car_xinxi" :key="index">
                <p class="two-right-top1-3-1">
                  {{ item.carinfo_number }}
                  <!-- <span class="two-right-top1-3-11">
                    <span v-if="item.carinfo_state==0" style="color:blue">入场</span>
                    <span v-if="item.carinfo_state==1" style="color:blue">离场</span>
                  
                  </span>-->
                </p>
              </div>
              <div v-for="item in car_xinxi" :key="item.people_status">
                <p class="two-right-top1-3-1">{{ item.carinfo_type }}</p>
                <p class="two-right-top1-3-1">{{ item.carinfo_start }}</p>
                <p class="two-right-top1-3-1">
                  <span v-if="item.carinfo_kind == 0">内部车</span>
                  <span v-if="item.carinfo_kind == 1">外部车</span>
                </p>
                <!-- <p class="two-right-top1-3-1">{{item.attendance_using}}</p> -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import http from "../api";
export default {
  // 当前时间

  // 文字向上
  name: "",
  components: {},
  mixins: [],
  props: {},
  data() {
    // 饼图
    this.chartSettingsbing = {
      radius: [10, 50],
      offsetY: 100,
    };
    this.title = {
      // text: "各车间每周产出数据",
      x: "center",
      textStyle: {
        color: "white", //标题颜色
        fontWeight: "bold", //粗体
        fontSize: 24, //字体大小
      },
    };

    // 安全教育环形图
    // this.chartSettings2 = {
    //   dimension: "日期",
    //   metrics: "访问用户",
    // };
    this.lchartSettings = {
      showLine: ["下单用户"],
    };
    //  this.yAxis1 = [
    //     {
    //       axisLabel: {
    //         show: true,
    //         textStyle: {
    //           color: "red",//这里是改变字体颜色
    //           fontSize: 18,//字体大小
    //         }
    //       }
    //     }
    //   ];
    //    this.xAxis1 = [
    //     {
    //       axisLabel: {
    //         show: true,
    //         textStyle: {
    //           color: "red",//这里是改变字体颜色
    //           fontSize: 18,//字体大小
    //         }
    //       }
    //     }
    //   ];
    // x轴
    this.xAxis = [
      {
        // data: [
        //   "裁床部",
        //   "车缝部",
        //   "电绣部",
        //   "喷印部",
        //   "手工部",
        //   "塑胶包装部",
        //   "委外加工",
        //   "注塑部",
        // ],
        // name: "日期",
        axisLabel: {
          show: true,
          textStyle: {
            // color: "white",
            fontSize: 15,
          },
        },
      },
    ];
    // y轴
    // this.yAxis = [
    //   {
    //     axisLabel: {
    //       show: true,
    //       textStyle: {
    //         color: "white", //这里是改变字体颜色
    //         fontSize: 12, //字体大小
    //       },
    //     },
    //   },
    // ];
    this.chartSettings = {
      stack: {
        xxx: ["dateTime", "数值"],
      },
    };
    return {
      lchartDatagroup:[],
      chartDatagroup: {
        columns: ["班组名称", "班组类型数量", "班组id", "班组总数"],
        rows: [
          { 班组名称: "1/1", 班组类型数量: 13, 班组id: 10, 班组总数: 32 },
          { 班组名称: "1/2", 班组类型数量: 35, 班组id: 32, 班组总数: 26 },
          { 班组名称: "1/3", 班组类型数量: 29, 班组id: 26, 班组总数: 76 },
          { 班组名称: "1/4", 班组类型数量: 17, 班组id: 14, 班组总数: 49 },
         
        ],
      },
      chartDatabing: {
        columns: ["培训等级", "人数"],
        rows: [
          { 培训等级: "一级培训", 人数: 1393 },
          { 培训等级: "二级培训", 人数: 3530 },
          { 培训等级: "三级培训", 人数: 2923 },
         
        ],
      },
      newlchartData:[],
      // 右柱状图
      lchartData: {
        columns: ["日期", "噪音", "温度", "湿度"],
        rows: [
          { 日期: "1/1", 噪音: 13, 温度: 10, 湿度: 32 },
          { 日期: "1/2", 噪音: 35, 温度: 32, 湿度: 26 },
          { 日期: "1/3", 噪音: 29, 温度: 26, 湿度: 76 },
          { 日期: "1/4", 噪音: 17, 温度: 14, 湿度: 49 },
          { 日期: "1/5", 噪音: 37, 温度: 34, 湿度: 23 },
          { 日期: "1/6", 噪音: 45, 温度: 42, 湿度: 78 },
        ],
      },
      // colors: ["#69D2E7", "#AAB3AB", "#61a0a8", "#d48265", "#A8E6CE"],
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      value: "",
      nowTime:"",
      nowWeek:"",
      nowDate:"",
      val: "",
      people_xinxi: [],
      liangdian: [],
      car_xinxi: [],
      // 预警监测信息
      police_xinxi: [],
      lalarm2: {}, //监控大屏大图下面的效率进度
      lalarm: [], //监控大屏大图下面的预警监测
      lgetNodeDates: [], //监控大屏大图下面的工程进度
      //  isactive:this.lgetNodeDates[0].efficiency.indexOf('滞后')!==-1,
      timer: null,
     
      // 倒计时
      safetyDays: "",
      countDownDays: "",
      // 环形图
      chartData2: {
        columns: ["日期", "访问用户"],
        rows: [
          { 日期: "1/1", 访问用户: 1393 },
          { 日期: "1/2", 访问用户: 3530 },
          { 日期: "1/3", 访问用户: 2923 },
          { 日期: "1/4", 访问用户: 1723 },
          { 日期: "1/5", 访问用户: 3792 },
          { 日期: "1/6", 访问用户: 4593 },
        ],
      },
      // 文字
      list: [],
      // 第一部分框
      activeName: "second",
      // 安全作业图表
      chartData: {
        columns: ["groupTypeNum", "groupTypeNum", "下单用户"],
        rows: [
          { 日期: "1/1", 访问用户: 1393, 下单用户: 1093 },
          { 日期: "1/2", 访问用户: 3530, 下单用户: 3230 },
          { 日期: "1/3", 访问用户: 2923, 下单用户: 2623 },
        ],
      },
      formInline: {
        user: "",
        region: "",
      },
      // 数据：塔吊
      lshuju: {
        tower_height: "", //	塔身高度
        tower_vertical: "", //	垂直角度
        tower_torque: "", //力矩比
        tower_wind: "", //风速
        tower_forearm: "", //前臂
        tower_afterwrap: "", //后壁
        tower_hoisting: "", //吊重
        tower_turn: "", //回转
        tower_range: "", //小车幅度
        tower_mitre: "", //水平斜角
        tower_hook: "", //吊钩高度
      },

      yinput: [], // 环境监测下拉
      yinput1: [], //基坑下拉
      // 环境监测数值
      datale: {
        weather_code: "",
        weather_receive: "",
        weather_wind: "",
        weather_wind_warning: "",
        weather_pmtwo: "",
        weather_pm_warning: "",
        weather_temperature: "",
        weather_noise: "",
        weather_noise_warning: "",
        weather_humidity: "",
        weather_pmten: "",
        weather_pmten_warning: "",
      },
      //基坑数值
      datale1: {
        pit_code: "",
        pit_receive: "",
        pit_measure: "",
        pit_change: "",
        pit_speed: "",
        pit_speed_warning: "",
        pit_control: "",
      },
    };
  },

  mounted() {
    // 获取当前时间
    this.timer = setInterval(() => {
      this.setNowTimes();
    }, 1000);
    //监控大屏下的亮点
    http.lliangdian({}).then((res) => {
      console.log("监控大屏下的亮点", res);
      this.liangdian = res;
    });
    // http.lliangdian
    //监控大屏左面的表格班组统计
    // buildLargeScreen/getGroupTypeNumList
    http.lgroupchart1({}).then((res) => {
      console.log("监控大屏左面的表格班组统计", res);
    this.lchartDatagroup=res
     for (let i = 0; i <this.chartDatagroup.rows.length; i++) {
           this.chartDatagroup.rows[i].班组名称=this.lchartDatagroup[i].group_name
            this.chartDatagroup.rows[i].班组类型数量=this.lchartDatagroup[i].groupTypeNum
             this.chartDatagroup.rows[i].班组id=this.lchartDatagroup[i].group_id
              this.chartDatagroup.rows[i].班组总数=this.lchartDatagroup[i].groupNum
                }
      // this.chartDatagroup.rows = res;
    });
    // 效率进度的数据 getPeopleIn
    http.getPeopleIn({}).then((r) => {
      console.log("效率进度", r);
      this.lalarm2 = r.data;
      // this.police_xinxi = r.data.buildAlarminfoList;
      // console.log("yyyyyyyyy", this.police_xinxi);
    });
    // 获取预警信息的向上滑动 http.getAlarminfoNum
    http.getAlarminfoNum({}).then((r) => {
      console.log("预警监测向上", r);
      this.police_xinxi = r.data.buildAlarminfoList;
      console.log("yyyyyyyyy", this.police_xinxi);
    });
    // http.getBuildCarList获取车辆
    // 基坑下拉
    http.jkList({}).then((r) => {
      console.log("基坑", r.data);
      this.yinput1 = r.data;
    });

    //环境监测 下拉框
    http.hujList({}).then((r) => {
      console.log("这是", r.data);
      this.yinput = r.data;
      // console.log("环境监测", this.lshuju);
    });
    //塔吊
    http.tower({}).then((r) => {
      this.lshuju = r.data[0];
      console.log("塔吊", this.lshuju);
    });
    // http.getBuildCarList

    http.rightchart1({}).then((res) => {
      console.log("环境监测", res);
      this.newlchartData=res
       for (let i = 0; i <this.lchartData.rows.length; i++) {
           this.lchartData.rows[i].日期=this.newlchartData[i].dateTime
            this.lchartData.rows[i].噪音=this.newlchartData[i].noise
             this.lchartData.rows[i].温度=this.newlchartData[i].temperature
              this.lchartData.rows[i].湿度=this.newlchartData[i].humidity
                }
      // this.lchartData.rows = res;
    });
    http.getBuildCarList({}).then((r) => {
      console.log("车辆", r);
      this.car_xinxi = r.data;
    });
    // 获取第三部分考勤数
    http.getBuildAttendanceNow({}).then((r) => {
      console.log("人员考勤", r);
      this.people_xinxi = r.data;
    });
    http.getNodeDates({}).then((res) => {
      console.log("监控大屏大图下面的工程进度", res.data);
      this.lgetNodeDates = res.data;
    });
    //监控大屏大图下面的工程进度图
    http.getAlarminfoNum({}).then((res) => {
      console.log("监控大屏大图下面的工程进度图", res.data);
      this.lalarm = res.data;
    });

    // 自动向上翻转1
    this.scroll();
    // 自动向上翻转2
    this.scroll2();
    //  获取倒计时 http.getBuildDate
    http.getBuildDate({}).then((r) => {
      console.log(r);
      this.safetyDays = r.data.safetyDays;
      this.countDownDays = r.data.countDownDays;
    });
    // 获取安全作业图表数据
    http.getBuildGroupNum({}).then((r) => {
      console.log(r);
      this.chartData.rows = r.data;
    });
    // 获取安全巡查数据 http.inquire
    http.inquire({}).then((r) => {
      console.log(r);
      this.list = r.data;
      console.log("数据", this.list);
    });
    // 天气
    (window.WIDGET = {
      CONFIG: {
        modules: "01234",
        background: 1,
        tmpColor: "FFFFFF",
        tmpSize: 20,
        cityColor: "FFFFFF",
        citySize: 16,
        aqiSize: 16,
        weatherIconSize: 24,
        alertIconSize: 18,
        padding: "70px 70px 70px 70px",
        shadow: "1",
        language: "auto",
        borderRadius: 5,
        fixed: "false",
        vertical: "middle",
        horizontal: "center",
        key: "GhxyemyMgV",
        backgroundColor: "black",
      },
    }),
      (function (d) {
        var c = d.createElement("link");
        c.rel = "stylesheet";
        c.href =
          "https://apip.weatherdt.com/simple/static/css/weather-simple.css?v=2.0";
        var s = d.createElement("script");
        s.src =
          "https://apip.weatherdt.com/simple/static/js/weather-simple.js?v=2.0";
        var sn = d.getElementsByTagName("script")[0];
        sn.parentNode.insertBefore(c, sn);
        sn.parentNode.insertBefore(s, sn);
      })(document);
    console.log(WIDGET);
  },

  methods: {
    // 退回首页
    tuichu() {
      this.$router.push({
        name: "控制台",
      });
    },
    // 环境监测数值
    inputchange(value) {
      console.log("z这是环境", value);
      let huanjing = {};
      huanjing.equipment_id = value;
      console.log("huanjing", huanjing);
      http.ygetBuildWeatherList(huanjing).then((r) => {
        console.log("这是环境数据", r.data);
        this.datale = r.data[0];
      });
    },
    // //基坑
    //点击切换选项把id 给后台把获取的数据绑定插值表达式
    input2change(val) {
      console.log("z这是基坑", val);
      let huanjing = {};
      huanjing.equipment_id = val;
      http.ygetBuildPitList(huanjing).then((r) => {
        console.log("这是基坑数据", r.data);
        this.datale1 = r.data[0];
      });
    },
    setNowTimes() {
      let myDate = new Date();
      // console.log(myDate)
      let wk = myDate.getDay();
      let yy = String(myDate.getFullYear());
      let mm = myDate.getMonth() + 1;
      let dd = String(
        myDate.getDate() < 10 ? "0" + myDate.getDate() : myDate.getDate()
      );
      let hou = String(
        myDate.getHours() < 10 ? "0" + myDate.getHours() : myDate.getHours()
      );
      let min = String(
        myDate.getMinutes() < 10
          ? "0" + myDate.getMinutes()
          : myDate.getMinutes()
      );
      let sec = String(
        myDate.getSeconds() < 10
          ? "0" + myDate.getSeconds()
          : myDate.getSeconds()
      );
      let weeks = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      let week = weeks[wk];
      this.nowDate = yy + "-" + mm + "-" + dd;
      this.nowTime = hou + ":" + min + ":" + sec;
      this.nowWeek = week;
    },
    // 自动向上翻转
    scroll() {
      const dom = document.getElementById("scroll-box");
      const that = this;
      let timer = null;
      const animationEndHandler = (evt) => {
        const dom = document.getElementById("scroll-box");
        dom.style.cssText = "transform:translate(0,0)";
        dom.appendChild(dom.children[0]); //把第一个DOM添加到最后一个去
      };
      const mouseEnterHander = (evt) => {
        clearInterval(timer);
      };
      const initInterval = () => {
        timer = setInterval(() => {
          if (dom.children[0]) {
            let scrollHeight = dom.children[0].offsetHeight;
            scrollHeight = parseInt(scrollHeight);
            dom.style.cssText = `transform:translate(0px,-${
              scrollHeight + 10
            }px);transition:all 1s ease;`;
          }
        }, 1000);
      };
      const mouseLeaveHandler = () => {
        initInterval();
      };
      dom.addEventListener("mouseenter", mouseEnterHander);
      dom.addEventListener("mouseleave", mouseLeaveHandler);
      dom.removeEventListener("transitionend", animationEndHandler);
      dom.addEventListener("transitionend", animationEndHandler); //只要监听到translate就会执行,这样就能一直动了
      initInterval();
    },
    // 动起来2222222222222222222222222222222222222222
    scroll2() {
      const dom2 = document.getElementById("scroll-box2");
      const that = this;
      let timer = null;
      const animationEndHandler = (evt) => {
        const dom2 = document.getElementById("scroll-box2");
        dom2.style.cssText = "transform:translate(0,0)";
        dom2.appendChild(dom2.children[0]); //把第一个DOM添加到最后一个去
      };
      const mouseEnterHander = (evt) => {
        clearInterval(timer);
      };
      const initInterval = () => {
        timer = setInterval(() => {
          if (dom2.children[0]) {
            let scrollHeight = dom2.children[0].offsetHeight;
            scrollHeight = parseInt(scrollHeight);
            dom2.style.cssText = `transform:translate(0px,-${
              scrollHeight + 10
            }px);transition:all 1s ease;`;
          }
        }, 1000);
      };
      const mouseLeaveHandler = () => {
        initInterval();
      };
      dom2.addEventListener("mouseenter", mouseEnterHander);
      dom2.addEventListener("mouseleave", mouseLeaveHandler);
      dom2.removeEventListener("transitionend", animationEndHandler);
      dom2.addEventListener("transitionend", animationEndHandler); //只要监听到translate就会执行,这样就能一直动了
      initInterval();
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
.liangdian1 {
  width: 100%;
  display: flex;
  margin-top: 8px;
}
.liangdian1-1 {
  width: 50%;
  height: 70px;
  text-align: center;
  align-items: center;
  /* color: #529aff; */
  color: white;

  /* line-height: 70px; */
}
.liangdian1-a {
  width: 50%;
  color: #95adce;
  font-size: 16px;
  text-align: center;
  font-weight: 500;
  /* height: 70px; */
}
.liangdian1-b {
  width: 50%;
  color: #95adce;
  font-size: 16px;
  text-align: center;
  font-weight: 700;
  /* height: 70px; */
}
.liangdian1-2 {
  width: 50%;
  height: 70px;
  text-align: center;
}
.liangdianimg {
  width: 70px;
  height: 70px;
}
.liangdian {
  width: 85%;
  margin: 0 auto;
  height: 260px;

  /* background: chartreuse;    */
  margin-top: 5px;
  overflow: hidden;
  overflow-y: scroll;
}
.l-gongditu-1-4-red {
  color: red;
}
.l-gongditu-1-4-blue {
  color: rgb(146, 146, 224);
}
.two-right-top1-juanjing {
  width: 400px;
  height: 190px;
  margin-left: 10px;
  background-color:cadetblue ;
  /* background: rgb(119, 143, 175, 0.8); */
  border-radius: 5px;
  margin: 0 auto;
  margin-top: 7px;
}
#zr_0 {
  height: 100px;
}
.ve-histogram {
  width: 300px;
  height: 100px !important;
}
/* 天气 */
.tian {
  width: 93%;
  margin-left: 15px;
  position: relative;
  z-index: 1;
  /* width: 50px; */
  /* height: 100px; */
  /* width: 200px; */
  margin-top: 20px;
}
#weather-v2-plugin-simple {
  background-color: black;
}
.s-sticker {
  background-color: black;
}
.l-gongditu-1-2 {
  text-align: center;
  /* color: #95adce; */
  color: white;
}
.l-gongditu-1-3 {
  text-align: center;
  /* color: #95adce; */
    color: white;
}
.l-gongditu-1-4 {
  text-align: center;
  /* color: #95adce; */
    color: white;
}
.active {
  color: red;
}
/*滚动条样式*/
::-webkit-scrollbar {
  width: 1px;
  height: 7px;
}
::-webkit-scrollbar-thumb {
  /* width: 10px;
            height: 10px; */
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #cbd8ea;
}
::-webkit-scrollbar-track {
  height: 1px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: #16335c;
}

/* .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
     line-height: 100px; 
    margin: 0;
  } */
/* .el-carousel >>> .el-carousel--horizontal >>> .el-carousel--card{
    width: 300px !important;
  } */
/* .el-carousel__container{
    width: 300px !important;
    height: 150px !important;
  } */
/* .el-carousel__item{
    width: 200px;
    height: 300px;
  } */
/* .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  } */
.l-gongditu {
  margin: 0 auto;
  /* margin-left: 5px; */
  margin-top: 15px;
  width: 474px;
  height: 160px;
  /* background: palegreen; */
  display: flex;
  /* justify-content: space-evenly;  */
  overflow: hidden;
  overflow-x: scroll;
}
.l-gongditu-1 {
  width: 110px;
  margin-left: 5px;
}
.l-gongditu-img {
  width: 110px;
  height: 63px;
}
.ltwo-bottom-bottom3-1-top {
  color: rgb(61, 127, 255);
  font-size: 20px;
  /* height: 39px; */
  line-height: 36px;
  text-align: center;
}
.ltwo-bottom-bottom3-1-bottem {
  width: 90%;
  margin: 0 auto;
  color: rgb(255, 255, 255);
  font-size: 14px;
  text-align: center;
  /* line-height: 35px; */
}
.two-bottom-bottom3-2 {
  width: 31%;
  height: 90px;
  margin-left: 5px;
  background-color: #672129;
}
/* .el-tabs__nav-scroll >>> .el-tabs__nav is-top >>> .el-tabs__item is-top{
    color: white !important;
} */
.f-all {
  width: 100%;
  /* height: 1500px; */
  background-color: #000712;
}
/* 头部 */
.f-one {
  width: 100%;
  height: 100px;
  /* background-color: lightblue; */
  /* display: flex; */
}
/* 头部上 */
.f-one-top {
  width: 100%;
  height: 70px;
  display: flex;
  /* background-color: lightpink; */
}
/*  时间天气*/
.f-one1 {
  width: 500px;
  height: 60px;
  /* background-color: rgb(55, 53, 211); */
  margin-top: 10px;
  margin-left: 10px;
  position: relative;
}
.timer {
  width: 135px;
  /* background-color: wheat; */
  color: white;
  font-size: 33px;
  /* font-weight: 600; */
  font-family: STXinwei;
  display: inline-block;
  margin-top: 13px;
  margin-left: 15px;
  position: absolute;
}
.timer2 {
  position: absolute;
  color: rgb(238, 238, 238);
  font-size: 27px;
  /* font-weight: 600; */
  font-family: STXinwei;
  display: inline-block;
  left: 160px;
  /* top: 5px; */
}
.timer3 {
  color: rgb(238, 238, 238);
  font-size: 23px;
  /* font-weight: 600; */
  font-family: STXinwei;
  display: inline-block;
  position: absolute;
  top: 35px;
  left: 160px;
}
/* logo项目名 */
.f-one2 {
  width: 600px;
  height: 95px;
  /* margin-top: 10px; */
  margin-left: -30px;
  /* background-color: blue; */
  /* margin-left: 70px;
  background-color: rgb(29, 84, 185); */
}
.f-one2-img {
  /* background-color: burlywood; */
  width: 100%;
  height: 95px;
  margin-left: -40px;
}
.tubiao{
  margin-left: 400px;
}
.f-one-bottom {
  width: 100%;
  height: 28px;
  /* margin-left: -20px; */
  /* margin-top: 15px; */
  /* background-color: lightsalmon; */
}
/* 第二部分 */
.f-two {
  width: 100%;
  height: 1055px;
  /* background-color: #04193f; */
  margin-top: 25px;
  display: flex;
}
/* 2左塔吊 */
.two-left {
  width: 29%;
  height: 1055px;
  margin-left: 15px;
  border-radius: 15px;
  position: relative;
  /* margin-left: 10px; */
  border: 1px solid #072e79;
  /* background-color: #092f75; */
}
/* 2左 top层 */
.y-top {
  width: 361px;
  height: 30px;
  position: relative;
}
.y-1 {
  position: absolute;
  right: 115px;
  top: 5px;
  font-weight: bold;
  color: #b24729;
}
/* 塔吊预警次数 */
.y-1-t {
  position: absolute;
  right: 50px;
  top: 5px;
  font-weight: bold;
  color: #b24729;
}
.y-2 {
  position: absolute;
  right: 0px;
}

/* 下拉菜单 */

.el-select >>> .el-input__inner {
  width: 100px !important;
  height: 26px;
  font-size: 12px;
  line-height: 26px;
  background: #071b41;
  border: 1px solid #265ab3;
  padding: 5px !important;
}
.el-select >>> .el-select__caret {
  line-height: 26px !important;
}
.el-select:hover >>> .el-input__inner {
  border: 1px solid #265ab3 !important;
}
.el-input__inner {
  padding: 5px !important;
}

.el-tabs__item >>> .is-active {
  color: rgb(233, 243, 234) !important;
}

.el-tabs__active-bar {
  background-color: rgb(215, 224, 216) !important;
}
/*  */
.y-l-1 {
  width: 55%;
  height: 200px;
  float: left;
  /* background: powderblue; */
}
.y-l-2 {
  width: 45%;
  height: 200px;
  float: left;
  /* background: crimson; */
}
/* 次数 */
.y-font {
  width: 100px;
  height: 30px;
}
/* 塔吊左侧 */
.col-left {
  width: 25%;
  height: 200px;
  position: relative;
}
/* 左侧环境基坑图片 */
.y-img-1 {
  width: 58%;
  height: 50%;
  position: absolute;
  right: 24px;
  top: 4px;
}
/* 塔吊图片 */
.y-img-2 {
  width: 58%;
  height: 50%;
  position: absolute;
  right: 24px;
  top: 34px;
}
/* 塔吊you侧 */
.col-right {
  width: 77%;
  height: 180px;
  position: absolute;
  top: 5px;
  right: 0px;
}
.col-right33 {
  width: 77%;
  height: 180px;
  position: absolute;
  top: 25px;
  right: 0px;
}
.y-v-2 {
  padding-left: 94px;
}

/* ===环境==== */
.y-2-2 {
  /* color: #95adce; */
  /* color: #000712; */
  color: white;
  width: 100%;
  height: 28px;
  line-height: 30px;
}
.l-1 {
  padding-left: 10px;
}
.el-tabs__nav-wrap {
  overflow: hidden;
  margin-bottom: -1px;
  position: relative;
  width: 329px;
}

.el-tabs__header {
  padding: 0;
  position: relative;
  margin: 0 0 15px;
  width: 360px;
}
.el-tabs__content {
  overflow: hidden;
  position: relative;
  width: 328px;
}
/* ======= */
/* ---- */

element.style {
  width: 361px !important;
}
.two-left1 {
  margin-left: 30px;
  /* background-color: lightyellow; */
  /* width: 100px; */
  position: absolute;
  top: -33px;
  left: 77px;
}
.left1-1 {
  color: white;
  font-size: 21px;
  /* font-weight: 600; */
  font-family: STXinwei;
  position: absolute;
  position: absolute;
  top: 16px;
  left: 55px;
}
.two-left2 {
  width: 90%;
  height: 30px;
  margin-left: 22px;
  margin-top: 20px;
  border-top: 1px solid #072e79;
  color: white;
  overflow: hidden;
  /* background-color: rgb(112, 111, 194); */
}
/* 重点设备监控 */
.two-left3 {
  width: 90%;
  margin-top: 5px;
  height: 285px;
  margin-left: 22px;
  color: #fff;
  position: relative;
  /* background-color: rgb(221, 221, 221); */
  background-color: cadetblue;
}
/* 安全巡查 */
.two-left4 {
  width: 88%;
  margin-left: 25px;
  margin-top: 10px;
  height: 165px;
  /* background-color: #072e79; */
}
.two-left4-top {
  /* width: 90%; */
  height: 40px;
  /* margin-left: 20px; */
  /* background-color: #072e79; */
  display: flex;
  font-size: 15px;
  /* color: #95adce; */
  color: white;

  /* border: 1px solid #072e79; */
}
.two-left4-top1 {
  margin-top: 7px;
  margin-left: 20px;
}
.two-left4-top2 {
  margin-top: 7px;
  margin-left: 15px;
}
.two-left4-top3 {
  margin-top: 7px;
  margin-left: 15px;
}
.two-left4-bottom {
  width: 100%;
  height: 120px;
  margin-left: 20px;
}
/* 文字自动向上 */
.father-cont {
  /* margin-left: 300px; */
  /* width: 100%; */
  margin: 0;
  padding: 0;
  height: 120px;
  overflow: hidden;
}
.f-hua1 {
  display: inline-block;
  width: 70px;
  margin-top: 5px;
  padding-left: 3px;
  font-size: 14px;

  /* background-color: wheat; */
}
.f-hua2 {
  display: inline-block;
  width: 135x;
  font-size: 13px;
  /* background-color: wheat; */
}
.f-hua3 {
  display: inline-block;
  font-size: 13px;
  width: 240px;
  margin-left: 3px;
  /* 字变成...的样式代码 */
  /* overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; */
  /* width: 70px; */
  /* background-color: wheat; */
}
/* .fa-scroll-cont {
   border: 1px solid red; 
   display: flex; 
}  */
.two-bottom3-zi {
  /* width: 70%;
  margin: 0 auto; */
  color: #95adce;
  color: white;
  font-weight: bolder;
  font-size: 16px;
  display: flex;
  justify-content: space-evenly;
  margin-top: 5px;
}
.two-bottom3-zi1 {
  color: #abffbf;
}
.two-bottom3-zi2 {
  color: #db723d;
}

li {
  /* width: 100%; */
  cursor: pointer;
  height: 30px;
  /* color: #95adce; */
  /* padding: 10px auto; */
  background-color: #203d67;
  margin-top: 10px;
  color: white;
  /* border-bottom: 1px solid #999999; */
}

/* 安全作业 */
.two-left5 {
  width: 90%;
  height: 200px;
  background: cadetblue;
  /* margin-left: 25px; */
  /* margin-top: 10px; */
  margin: 0 auto;
  margin-top: 10px;

  color: white;
  /* background-color: #072e79; */
}
/* 安全培训 */
.two-left6 {
  width: 88%;
  margin-left: 25px;
  /* margin-top: 10px; */
  height: 180px;
  /* background-color: #072e79; */
}
.left2-zi {
  display: inline-block;
  /* color: #1959cf; */
  color: white;
  position: absolute;

  left: 35px;
  /* top: 5px; */
  /* margin-left: -170px; */
  font-size: 14px;
  /* line-height: 30px; */
  margin-top: 4px;
}
/* 2中 */
.two-bottom {
  width: 37.8%;
  height: 1055px;
  margin-left: 15px;
  /* border-radius: 15px;
  border: 1px solid #072e79; */
  /* font-weight: 600; */
  /* background-color: #3d5177; */
  position: relative;
}
.two-bottom-top {
  height: 623px;
  border-radius: 15px;
  border: 1px solid #072e79;
}
.two-bottom1 {
  margin-left: 30px;
  /* background-color: lightyellow; */
  /* width: 100px; */
  position: absolute;
  top: -33px;
  left: 160px;
}
/* 工地实景图 */
.two-bottom2 {
  width: 91%;
  margin-left: 25px;
  margin-top: 5px;
  height: 285px;
  position: relative;
  /* background-color: #072e79; */
}

/* 摄像全部 */
.img-1 {
  /* margin-left: 10px; */
  /* position: relative; */
  position: absolute;
  top: -10px;
  /* margin-left: 10px; */
}
.img-2 {
  /* margin-left: 10px; */
  /* position: relative; */
  position: absolute;
  top: 80px;
  left: 160px;
  /* margin-left: 10px; */
}
.img-3 {
  /* margin-left: 10px; */
  /* position: relative; */
  position: absolute;
  top: 30px;
  left: 350px;

  /* margin-left: 10px; */
}
/* 摄像头 */
.two-bottom2-sxt {
  width: 50px;
  height: 50px;
  position: absolute;
  left: 40px;
  top: 40px;
}
/* 摄像头的旋转部分 */
.two-bottom2-sxt1 {
  position: absolute;
  left: 1px;
  top: -3px;
  width: 120px;
  height: 120px;
  z-index: 1;
  animation: rotate1 7s linear infinite;
}
@keyframes rotate1 {
  form {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/* 摄像头的杆 */
.two-bottom2-sxt2 {
  position: absolute;
  left: 15px;
  width: 70px;
  height: 100px;
  top: 80px;
}
.two-bottom3 {
  width: 88%;
  margin-left: 25px;
  margin-top: 10px;
  height: 190px;
  /* background-color: #072e79; */
  /* overflow: hidden; */
}
/* 中间下面 */
.two-bottom-bottom {
  width: 100%;
  /* height: 420px;
  border-radius: 15px;
  border: 1px solid #072e79; */
  display: flex;
  margin-top: 10px;
}
.two-bottom-bottom1 {
  width: 48%;
  height: 420px;
  border-radius: 15px;
  border: 1px solid #072e79;
}
.two-bottom-bottom2 {
  width: 48%;
  height: 420px;
  border-radius: 15px;
  margin-left: 15px;
  border: 1px solid #072e79;
}
.two-bottom-bottom2-zi {
  color: #529aff;
  font-size: 18px;
  margin-top: 10px;
  margin-left: 15px;
  font-style: italic;
}

.two-bottom-bottom3 {
  width: 98%;
  height: 90px;
  margin: 0 auto;
  /* background-color: wheat; */
  margin-top: 10px;
  /* margin-left: 3px; */
  display: flex;
}
.two-bottom-bottom3-1 {
  width: 31%;
  height: 90px;
  margin-left: 5px;
  background: rgba(63, 114, 186, 0.2);
}

/* 2右 */
.two-right {
  width: 29%;
  height: 1055px;
  margin-left: 15px;
  /* border-radius: 15px;
  border: 1px solid #072e79; */
  /* background-color: #3d5177; */
  position: relative;
}
.two-right-top {
  border-radius: 15px;
  border: 1px solid #072e79;
  height: 510px;
}
.two-right-top1-tianqi {
  width: 92%;
  height: 180px;

  /* background-color: #072e79; */
  margin: 0 auto;
  margin-top: 10px;
}
.two-right-top1 {
  width: 92%;
  margin-left: 25px;
  margin-top: 10px;
  height: 190px;
  overflow: hidden;
  /* background-color: #072e79; */
  display: flex;
}
.two-right-top1-1 {
  width: 100px;
  height: 90px;
  /* background-color: wheat; */
  margin-top: 57px;
  margin-left: 10px;
}
.two-right-top1-2 {
  width: 140px;
  height: 190px;
  background-color: #95adce;
}
.two-right-top1-3 {
  width: 140px;
  height: 200px;
  margin-left: 10px;
  /* margin-top: 10px; */
  /* background-color: #95adce; */
}
.two-right-top1-3-1 {
  font-size: 16px;
  color: white;
  margin-top: 10px;
  /* 字变成...的样式代码 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.two-right-top1-3-11 {
  width: 45px;
  height: 20px;
  color: white;
  text-align: center;
  line-height: 20px;
  background-color: #072e79;
  margin-left: 85px;
  display: inline-block;
}
.two-right-bottom {
  border-radius: 15px;
  border: 1px solid #072e79;
  height: 505px;
  margin-top: 35px;
  /* position: absolute; */
  position: relative;
}
.two-right11 {
  margin-left: 30px;
  /* background-color: lightyellow; */
  /* width: 100px; */
  position: absolute;
  top: -33px;
  left: 85px;
}
.two-bottom-bottom4 {
  width: 90%;
  height: 40px;
  /* margin-left: 20px; */
  /* background-color: #072e79; */
  display: flex;
  font-size: 15px;
  margin-left: 10px;
  color: #95adce;

  /* border: 1px solid #072e79; */
}
.two-bottom4-top1 {
  margin-top: 7px;
  /* margin-left: 20px; */
  /* font-size: 13px; */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.two-bottom4-top2 {
  margin-top: 7px;
  margin-left: 15px;
}
.two-bottom4-top3 {
  margin-top: 7px;
  margin-left: 50px;
}
.f-hua1-bottom {
  display: inline-block;
  width: 70px;
  margin-top: 5px;
  padding-left: 3px;
  font-size: 14px;
  /* 字变成...的样式代码 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* background-color: wheat; */
}
.f-hua2-bottom {
  display: inline-block;
  width: 135x;
  font-size: 14px;
  /* background-color: wheat; */
}
.f-hua3-bottom {
  display: inline-block;
  font-size: 14px;
  /* width: 240px; */
  margin-left: 3px;
  /* 字变成...的样式代码 */
  /* overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; */
  /* width: 70px; */
  /* background-color: wheat; */
}
.father-cont-bottom {
  margin: 0;
  padding: 0;
  height: 250px;
  width: 95%;
  overflow: hidden;
  margin-left: 7px;
}
</style>